<template>
	<view class="group-wrapper">
		<view class="f-header" @click="navToResourceGroup(group)">
			<!-- <image :src="group.iconUrl" v-if="group.iconUrl"></image> -->
			<view class="tit-box">
				<text class="tit">{{group.groupName}}</text>
			</view>
			<text class="tit2">{{group.groupDescription}}</text>
		</view>
		<view class="group-item-resource-list-wrapper" v-if="articleList.length>0">
			<scroll-view class="group-item-resource-list" scroll-with-animation scroll-x>
				<view class="scoll-wrapper">
					<view class="group-item-resource" @click="navToResourceDetail(resource)" v-for="resource in articleList">
						<image class="resource-image article-image" :src="resource.coverImageUrl" mode="aspectFill">
						</image>
						<div class="resource-type resource-type-article"><span class="iconfont icon-preview"></span>
						</div>
						<text class="resource-name article-name">{{resource.resourceName}}</text>
						<text class="author-name" v-if="resource.resourceAuthorDTO">{{resource.resourceAuthorDTO.authorName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="group-item-resource-list-wrapper" v-if="audioList.length>0">
			<scroll-view class="group-item-resource-list" scroll-with-animation scroll-x>
				<view class="scoll-wrapper">
					<view class="group-item-resource" @click="navToResourceDetail(resource)" v-for="resource in audioList">
						<image class="resource-image audio-image" :src="resource.coverImageUrl" mode="aspectFill">
						</image>
						<div class="resource-type resource-type-audio"><span class="iconfont icon-audio"></span></div>
						<text class="resource-name audio-name">{{resource.resourceName}}</text>
						<text class="author-name">{{resource.authorName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="group-item-resource-list-wrapper" v-if="videoList.length>0">
			<scroll-view class="group-item-resource-list" scroll-with-animation scroll-x>
				<view class="scoll-wrapper">
					<view class="group-item-resource" @click="navToResourceDetail(resource)" v-for="resource in videoList">
						<image class="resource-image video-image" :src="resource.coverImageUrl" mode="aspectFill">
						</image>
						<div class="resource-type resource-type-video"><span class="iconfont icon-video"></span></div>
						<text class="resource-name video-name">{{resource.resourceName}}</text>
						<text class="author-name">{{resource.authorName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="group-item-resource-list-wrapper" v-if="ebookList.length>0">
			<scroll-view class="group-item-resource-list" scroll-with-animation scroll-x>
				<view class="scoll-wrapper">
					<view class="group-item-resource" @click="navToResourceDetail(resource)" v-for="resource in ebookList">
						<image class="resource-image ebook-image" :src="resource.coverImageUrl" mode="aspectFill">
						</image>
						<div class="resource-type resource-type-ebook"><span class="iconfont icon-ebook"></span></div>
						<text class="resource-name ebook-name">{{resource.resourceName}}</text>
						<text class="author-name">{{resource.authorName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	name: 'resource-group'
	export default {
		components: {

		},
		data() {
			return {
				columnClass: 'goods-item-col-' + this.cols
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint', 'applicationConfig']),
			articleList: function() {
				let list = [];
				this.group.resourceList.forEach(function(resource, index) {
					if (resource.resourceType == '1') {
						list.push(resource);
					}
				})
				return list;
			},
			audioList: function() {
				let list = [];
				this.group.resourceList.forEach(function(resource, index) {
					if (resource.resourceType == '2') {
						list.push(resource);
					}
				})
				return list;
			},
			videoList: function() {
				let list = [];
				this.group.resourceList.forEach(function(resource, index) {
					if (resource.resourceType == '3') {
						list.push(resource);
					}
				})
				return list;
			},
			ebookList: function() {
				let list = [];
				this.group.resourceList.forEach(function(resource, index) {
					if (resource.resourceType == '4') {
						list.push(resource);
					}
				})
				return list;
			}
		},
		props: {
			group: {
				type: Object,
				default: function() {

				}
			},
			cols: {
				type: Number,
				default: 2
			}
		},
		methods: {
			//详情页
			navToResourceDetail(item) {
				let id = item.resourceUuid;
				uni.navigateTo({
					url: '/pages/resource/resource-detail?id=' + id
				})
			},
			//资源组页
			navToResourceGroup(group) {
				let id = group.resourceGroupUuid;
				uni.navigateTo({
					url: '/pages/resource/group?id=' + id
				})
			},
			stopPrevent() {}
		},
	}
</script>

<style lang='scss'>
	.group-wrapper {
		display: flex;
		flex-wrap: wrap;
		border-radius: 20upx;
		.f-header {
			display: flex;
			align-items: center;
			width: 100%;
			height: 80upx;
			padding: 20upx;
			/* background: #fff; */

			image {
				flex-shrink: 0;
				width: 50upx;
				height: 50upx;
				margin-right: 20upx;
			}

			.tit-box {
				flex: 1;
				display: flex;
				flex-direction: column;
			}

			.tit {
				font-size: $font-lg +2upx;
				font-weight: bold;
				color: $font-color-dark;
				line-height: 1.3;
			}

			.tit2 {
				font-size: $font-base;
				color: $font-color-light;
				line-height: 1.3;
			}

			.icon-you {
				font-size: $font-lg +2upx;
				color: $font-color-light;
			}
		}

		.group-item-resource-list-wrapper {
			width: 100%;
			overflow: hidden;
			margin-bottom: 10upx;

			.group-item-resource-list {
				background: #fff;
				.scoll-wrapper {
					display: flex;
					align-items: flex-start;
				}

				white-space: nowrap;
				padding: 20upx;
				border-radius: 6upx;
/* 				background: #fff;
				box-shadow: 1px 1px 5px rgba(0, 0, 0, .2); */
				position: relative;
				z-index: 1;

				.group-item-resource {
					position: relative;
					margin-right: 20upx;
					font-size: $font-sm+2upx;
					color: $font-color-dark;
					line-height: 1.8;

					.resource-type {
						position: absolute;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 60upx;
						height: 60upx;
						background: #000;
						border-radius: 50%;
						border: solid .5px #fff;
						opacity: .6;

						.iconfont {
							color: #fff;
							font-size: $font-lg+4upx;
						}
					}

					.resource-type-article {
						top: 74upx;
						left: 94upx;
					}

					.resource-type-audio {
						top: 74upx;
						left: 94upx;
					}

					.resource-type-video {
						top: 74upx;
						left: 94upx;
					}

					.resource-type-ebook {
						top: 94upx;
						left: 66upx;
					}


					.resource-image {
						border-radius: 6upx;
					}

					.article-image {
						width: 256upx;
						height: 192upx;
					}

					.audio-image {
						width: 256upx;
						height: 192upx;
					}

					.video-image {
						width: 256upx;
						height: 192upx;
					}

					.ebook-image {
						width: 192upx;
						height: 256upx;
					}

					.resource-name {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
						font-size: $font-base;
						color: $font-color-base;
					}
					.article-name {
						width: 256upx;
					}
					
					.audio-name {
						width: 256upx;
					}
					
					.video-name {
						width: 256upx;
					}
					
					.ebook-name {
						width: 192upx;
					}

					.author-name {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
						font-size: $font-sm;
						color: $font-color-light;
					}
				}
			}
		}

	}
</style>